function scrollToTitle() {
    window.location.hash = '#productDetailTitle';
    console.log("productDetailTitle");
    var detailTag = document.getElementById("productDetailTag");
    var anxinTag = document.getElementById("productDetailAnxinTag");
    changeTabStyle(detailTag, anxinTag);
}


function scrollToAnxin() {
    window.location.hash = '#productAnxin';
    console.log("productAnxin");
    var detailTag = document.getElementById("productDetailTag");
    var anxinTag = document.getElementById("productDetailAnxinTag");
    changeTabStyle(anxinTag, detailTag);
}

function loadDataFromServer() {
    //使用AJAX请求网络
    var request = new XMLHttpRequest();
    request.open("GET", "http://as-vip.missfresh.cn/v3/product/p-hbxjkelxl-5g", true);
    request.setRequestHeader("x-region", "{\"address_code\":\"110105\",\"station_code\":\"MRYX|mryx_bj_ft\"}");
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.onreadystatechange = function () {
        console.log("当前的状态为：" + request.readyState + ", 当前的状态码为：" + request.status);

        if (request.readyState == 4 && request.status == 200) {
            var responseType = request.responseType;
            console.log("responseType : " + responseType);
            console.log("responseObject : " + request.response);
            console.log("request.response.image : " + JSON.parse(request.response).image);

            var jsonObject = JSON.parse(request.response);
            var vm = new Vue({
                el: '#productInfo',
                data: jsonObject,
            });
        }
    }
    request.send(null);
}

function onRequestSuccess() {

}

function onPageLoadFinished() {
    console.log("页面加载完成时的时间为：" + new Date());
    var detailTag = document.getElementById("productDetailTag");
    var anxinTag = document.getElementById("productDetailAnxinTag");
    changeTabStyle(detailTag, anxinTag);
}

function changeTabStyle(tab1, tab2) {
    tab1.style = "            flex-grow: 0;\n" +
        "            flex-shrink: 1;\n" +
        "            flex-basis: auto;\n" +
        "            text-align: center;\n" +
        "            color: #ff4891;\n" +
        "            font-size: 14px;\n" +
        "            border-bottom-style: solid;\n" +
        "            border-bottom-color: #ff4891;\n" +
        "            border-bottom-width: 2px;\n" +
        "            padding-bottom: 10px;\n" +
        "            padding-left: 10px;\n" +
        "            padding-right: 10px;";


    tab2.style = "            flex-grow: 0;\n" +
        "            flex-shrink: 1;\n" +
        "            flex-basis: auto;\n" +
        "            text-align: center;\n" +
        "            color: #474254;\n" +
        "            font-size: 14px;\n" +
        "            border-bottom-style: solid;\n" +
        "            border-bottom-color: white;\n" +
        "            border-bottom-width: 2px;\n" +
        "            padding-bottom: 10px;\n" +
        "            padding-left: 10px;\n" +
        "            padding-right: 10px;";
}
